<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <link rel="stylesheet" href="./font_wjtlk5pcf9/iconfont.css"> -->
    <script src="./font_wjtlk5pcf9/iconfont.js"></script>
</head>
<style>
    .icon {
        width: 1em;
        height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
    }

    body {
        background-color: wheat;
    }

    h1 {
        text-align: center;
    }

    pre {
        font-size: 20px;
        white-space: pre-wrap;
        font-family: Arial, Helvetica, sans-serif;
    }

    .top {
        position: relative;
        display: flex;
        height: 35px;
        line-height: 35px;
        background-color: #ffffff;

    }

    .color {
        position: absolute;
        left: 5px;
    }

    .rgb {
        display: inline-flex;
        width: 12px;
        height: 12px;
        margin-left: 10px;
        margin-bottom: -1.8px;
    }

    .rgb1 {
        border: 1px solid #C7EFFD;
    }

    .rgb2 {
        border: 1px solid #E0EDFD;
    }

    .rgb3 {
        border: 1px solid #C5E164;
    }

    .rgb4 {
        border: 1px solid #DDD0AF;
    }

    .rgb5 {
        border: 1px solid #BBB4E3;
    }

    .rgb6 {
        border: 1px solid #F9DBCC;
    }

    .rgb7 {
        border: 1px solid #BFDBCC;
    }

    .rgb8 {
        border: 1px solid #E1E1E1;
    }

    .size {
        position: absolute;
        display: inline-flex;
        left: 350px;
    }

    .big {
        margin-left: 6px;
        color: black;
    }

    .btn {
        position: absolute;
        right: 5px;
    }

    button {
        background-color: lightcyan;
        border: 1px solid lightblue;
        border-radius: 5px;
    }

    @media screen and (min-width: 541px) {
        .phone {
            display: none;
        }
    }

    @media screen and (max-width:541px) {
        .top {
            display: none;
        }

        .phone {
            visibility: hidden;
        }

        .phone {
            visibility: hidden;
        }

        .Top {
            display: inline-flex;
            position: fixed;
            top: 0;
            right: 0;
            height: 50px;
            width: 100%;
            line-height: 50px;
            background-color: black;
            color: white;
            justify-content: flex-end;
        }

        .Top .iconfont {
            font-size: 30px;
            margin-left: 20px;
            margin-right: 5px;
            margin-top: 10px;
        }

        .Top .icon-fanhui {
            position: absolute;
            left: 0;
            font-size: 25px;
        }

        .addbook {
            position: fixed;
            background-color: black;
            color: white;
            width: 110px;
            height: 40px;
            top: 25%;
            left: calc(100% - 95px);
            border-radius: 20px;
            text-align: center;
            line-height: 40px;
        }

        .writecomment {
            position: fixed;
            background-color: black;
            color: white;
            width: 70px;
            height: 70px;
            top: 70%;
            left: calc(100% - 85px);
            border-radius: 50%;
        }

        .icon-gangbi {
            position: absolute;
            top: 15%;
            left: 30%;
            font-size: 25px;
        }

        .writecomment p {
            position: absolute;
            top: 30%;
            left: 17%;
        }

        .Center {
            position: fixed;
            bottom: 10%;
            left: 0;
            display: inline-flex;
            width: 100%;
            height: 35px;
            background-color: black;
            color: white;
            justify-content: space-around;
            font-size: 17px;
            line-height: 35px;
            border-bottom: 1px solid #cccccc;
        }

        .Bottom {
            position: fixed;
            display: inline-flex;
            width: 100%;
            height: 64px;
            left: 0;
            bottom: 0;
            background-color: black;
            color: white;
            justify-content: space-around;
        }

        .Bottom .iconfont {
            font-size: 28px;
            position: absolute;
            top: 7%;
            margin-left: -11px;
        }

        .Bottom p {
            position: absolute;
            top: 35%;
            text-align: center;
            font-size: 13px;
            margin-left: -10px;
        }

        .tobecommented p {
            margin-left: -15px;
        }
    }
</style>

<body>
    <div class="phone">
        <div class="Top">
            <!-- <span class="iconfont icon-fanhui"></span>
            <span class="iconfont icon-shuben"></span>
            <span class="iconfont icon-liwuhuodong"></span>
            <span class="iconfont icon-pinglun"></span> -->
            <svg class="icon iconfont icon-fanhui" aria-hidden="true">
                <use xlink:href="#icon-fanhui"></use>
            </svg>
            <svg class="icon iconfont icon-shuben" aria-hidden="true">
                <use xlink:href="#icon-shuben"></use>
            </svg>
            <svg class="icon iconfont icon-liwuhuodong" aria-hidden="true">
                <use xlink:href="#icon-liwuhuodong"></use>
            </svg>
            <svg class="icon iconfont icon-pinglun" aria-hidden="true">
                <use xlink:href="#icon-pinglun"></use>
            </svg>
        </div>
        <div class="addbook">加入书架</div>
        <div class="writecomment">
            <!-- <span class="iconfont icon-gangbi"></span> -->
            <svg class="icon iconfont icon-gangbi" aria-hidden="true">
                <use xlink:href="#icon-gangbi"></use>
            </svg>
            <p>写章评</p>
        </div>
        <div class="Center">
            <div class="passage before">上一章</div>
            <div class="passage after">下一章</div>
        </div>
        <div class="Bottom">
            <div class="table">
                <!-- <span class="iconfont icon-mulu"></span> -->
                <svg class="icon iconfont icon-mulu" aria-hidden="true">
                    <use xlink:href="#icon-mulu"></use>
                </svg>
                <p>目录</p>
            </div>
            <div class="night">
                <!-- <span class="iconfont icon-heiyemoshi"></span> -->
                <svg class="icon iconfont icon-heiyemoshi" aria-hidden="true">
                    <use xlink:href="#icon-heiyemoshi"></use>
                </svg>
                <p>黑夜</p>
            </div>
            <div class="setup">
                <!-- <span class="iconfont icon-shezhi"></span> -->
                <svg class="icon iconfont icon-shezhi" aria-hidden="true">
                    <use xlink:href="#icon-shezhi"></use>
                </svg>
                <p>设置</p>
            </div>
            <div class="tobecommented">
                <!-- <span class="iconfont icon-weibiaoti2fuzhi06"></span> -->
                <svg class="icon iconfont icon-weibiaoti2fuzhi06" aria-hidden="true">
                    <use xlink:href="#icon-weibiaoti2fuzhi06"></use>
                </svg>
                <p>待评论</p>
            </div>
        </div>
    </div>
    <div class="nav">
        <div class="top">
            <div class="color"><strong>选择背景颜色:</strong>
                <div class="rgb rgb1" style="background-color: #82C6E9;"></div>
                <div class="rgb rgb2" style="background-color: #BED6FD;"></div>
                <div class="rgb rgb3" style="background-color: #90CC2B;"></div>
                <div class="rgb rgb4" style="background-color: #9D8A6C;"></div>
                <div class="rgb rgb5" style="background-color: #917EB8;"></div>
                <div class="rgb rgb6" style="background-color: #EC6939;"></div>
                <div class="rgb rgb7" style="background-color: #84AB98;"></div>
                <div class="rgb rgb8" style="background-color: #CACACA;"></div>
            </div>
            <div class="size"><strong>选择字号:</strong>
                <a href="#" class="big biggest">特大</a>
                <a href="#" class="big bigger">大</a>
                <a href="#" class="big center">中</a>
                <a href="#" class="big small">小</a>
            </div>
            <div class="btn">
                <button style="background-color: rgb(245, 199, 181); border: rgb(241, 168, 139);">全屏阅读</button>
                <button>评论本章</button>
                <button>返回目录</button>
                <button>+书架</button>
                <button>上一章</button>
                <button>下一章</button>
            </div>
        </div>

        <div class="main">
            <h1>第一章 偷偷</h1>
            <pre>       烈日炎炎，蝉鸣声响破天际。</pre>
            <pre>       旭日中学二楼的某间教室。陈明旭站在讲台上，拿着把教用三角尺讲课。上衣被汗水打湿了大半。空气热的像是要冒出泡。天花板上的风扇运作着，发出很大的声响。在这高温下，吹出来的风似乎都是滚烫的。</pre>
            <pre>       底下的学生也一副昏昏欲睡的模样。他不免有些暴躁。</pre>
            <pre>       “看黑板。”注意到坐在第三排女生的状态，陈明旭稍稍皱了眉，尺子拍打.黑板的力道加重，“听见没有！看黑板！”几个即将睡着的学生猛地清醒，睁大迷蒙的眼，逼迫自己看向黑板。</pre>
            <pre>       女生仿佛没听见，依然低着头，拿着铅笔在纸上涂涂画画。她长着张漂亮而无害的脸，因为年龄尚小，还有些稚嫩，更显得可爱。坐姿端正，气质恬静温和，看上去就是那种老师最喜欢的听话学生。</pre>
            <pre>       ——排开此时她把讲台上的老师当成空气的行为。</pre>
            <pre>       陈明旭的眉头皱得更深，嘴里继续念叨着：“角一等于角二，角三等于108度——”见题目都快读完了，她还没有要抬起头的征兆。陈明旭忍了半天的怒火瞬间上了头，重重地把三角尺拍在桌上。塑料尺和木桌撞击，发出巨大的声响。这声音吓得全班同时瑟缩了下，接踵而来的一声怒吼更是让气氛变得僵硬。</pre>
            <pre>       “桑稚！”</pre>
            <pre>       被点到名的桑稚抬起头，看了陈明旭两秒。而后把手中的笔放下，自觉站了起来。陈明旭按捺着脾气道：“我刚刚说什么了？”桑稚看了眼黑板上的图，神情平静：“角四等于72度。”习惯了她任何时刻都这么一副乖乖学生的模样，陈明旭这次没再被骗到，又拿尺子拍了拍桌面，冷笑道：“我还没讲到那！”</pre>
        </div>
    </div>
</body>
<script>
    var rgb = document.querySelectorAll('.rgb');
    console.log(rgb);
    rgb.forEach(element => {
        // console.log(element);
        element.onclick = function (event) {
            var target = event.target;
            console.log(target);
            var a = document.defaultView.getComputedStyle(target, null);
            var b = a.backgroundColor
            console.log(b);
            var body = document.querySelector('body');
            body.style.backgroundColor = b;
        }
    })
    var biggest = document.querySelector('.biggest');
    console.log(biggest);
    biggest.onclick = function () {
        var contain = document.querySelector('.main');
        console.log(contain);
        var child = contain.children;
        console.log(child);
        for (var k of child) {
            console.log(k);
            k.style.fontSize = '50px';
        }
    }
    var bigger = document.querySelector('.bigger');
    bigger.onclick = function () {
        var contain = document.querySelector('.main');
        var child = contain.children;
        for (var k of child) {
            k.style.fontSize = '35px';
        }
    }
    var center = document.querySelector('.center');
    center.onclick = function () {
        var contain = document.querySelector('.main');
        var child = contain.children;
        for (var k of child) {
            k.style.fontSize = '20px';
        }
    }
    var small = document.querySelector('.small');
    small.onclick = function () {
        var contain = document.querySelector('.main');
        var child = contain.children;
        for (var k of child) {
            k.style.fontSize = '15px';
        }
    }
    var width = document.body.clientWidth;
    console.log(width);
    var phone = document.querySelector('.phone');
    console.log(phone);
    if (width < 540) {
        var body = document.querySelector('body');
        body.onclick = function () {
            var div = document.querySelector('.phone');
            if (div.style.visibility == "hidden") {
                div.style.visibility = "visible";
            } else {
                div.style.visibility = "hidden";
            }
        }
    }
</script>

</html>